<template lang="pug">
    .vin-list
        div(v-if="!oemInfo")
            noPanel
        div(v-else)
            div(class="car-info")
                .car-msg
                    .info
                        img(:src="oemInfo.icon")
                    .name
                        h4 {{oemInfo.brand_name}} {{oemInfo.model_name}} {{oemInfo.sub_name}}
                        p 手动
                .show(@click="show=!show")
                    span(v-if="!show") 展开
                    span(v-else="show") 收起
            div(class="car-detail",v-if="show")
                mt-cell(title="车型品牌名称",class="base-line--bottom",:value="oemInfo.brand_name")
                mt-cell(title="车系名称",class="base-line--bottom",:value="oemInfo.series_name")
                mt-cell(title="车型名称",class="base-line--bottom",:value="oemInfo.model_name")
                mt-cell(title="排量名称",class="base-line--bottom",:value="oemInfo.sub_name")
                mt-cell(title="生产年份",class="base-line--bottom",:value="oemInfo.year")
                mt-cell(:title="item.type_name",v-for="(item,index) in oemInfo.params",class="base-line--bottom",:key="index",:value="item.value")
            div()
                goodsList

</template>

<script>
import goodsList from '@/components/function/goodsList.vue'
import noPanel from '@/components/function/noPanel.vue'
export default {
  name: '',
  data () {
    return {
      oemInfo: null,
      show: false
    }
  },
  props: {
    'oemno': {
      type: String
    }
  },
  components: {
    goodsList,
    noPanel
  },
  watch: {

  },
  mounted () {

  },
  methods: {
    async getList () {
      let params = {
        type: '1',
        oemno: this.oemno
      }
      if (this.oemno.length === 0) {
        this.$toast({
          message: 'OE号错误',
          iconClass: 'icon fa fa-warning'
        })
      } else {
        let oInfo = await carAPI.searchpartitems(params)
        this.oemInfo = oInfo.vin_Info
      }
    }
  }
}
</script>

<style scoped lang="scss" >
.vin-list{
    .car-info{
        height: 88px;
        display: flex;
        background: #fff4cf;
        border-top: 1px solid #ffd87e;
        border-bottom: 1px solid #ffd87e;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        img{
            width: 48px;
            height: 48px;
            border-radius: 50%;
        }
        .car-msg{
            flex: 1;
            display: flex;
        }
        .name{
            font-size: 12px;
            margin-left: 24px;
            color: #666;
            p{
                color: #999;
                margin-top: 12px;
            }
        }
        .show{
            width: 100px;
            font-size: 16px;
        }
    }
}

</style>
